import React, { useEffect } from 'react'
import './style.scss'
import PropTypes from 'prop-types'

BackTop.propTypes = {
    iftop: PropTypes.bool
}

BackTop.propTypes = {
    setIftop: PropTypes.func
}
export default function BackTop(props) {
    const { setIftop, iftop } = props
    useEffect(() => {
        window.addEventListener('scroll', handleScroll)
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    const handleScroll = () => {
        let iftopChild = window.pageYOffset > 100 ? true : false
        setIftop(iftopChild)
    }
    const toTop = () => {
        window.scrollTo(0, 0)
    }
    return (
        <div className="page" id="backTop">
            {iftop && <div className="box">
                <div className="totop" onClick={toTop}>
                    <div className="top">返回 <p> 顶部</p></div>
                </div>
            </div>}
        </div>
    )
}
